import { reqGetHospitalShow } from "@/api/hospital/hospitalList";
import type { HospitalShowType } from "@/api/hospital/model/hospitalListTypes";
import { Card, Descriptions, Button } from "antd";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

function HospitalShow() {
  // 数据初始化要按照数据结构全部进行初始化(创建医院详情状态)
  const [hospitalShow, setHospitalShow] = useState<HospitalShowType>();

  // 获取路由参数id
  const { id } = useParams();

  // 创建路由导航函数(跳转)
  const navigate = useNavigate();

  // 初始化获取医院详情数据显示
  useEffect(() => {
    const getHospitalShow = async () => {
      const res = await reqGetHospitalShow(id as string);
      // console.log(res);
      setHospitalShow(res);
    };
    getHospitalShow();
  }, []);

  // 返回按钮
  const goBack = () => {
    navigate("/syt/hospital/hospitalList");
  };

  return (
    <Card>
      {/* 基本信息
      column 一行的 DescriptionItems 数量 */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称" labelStyle={{ width: 200 }}>
          {hospitalShow?.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            style={{ width: "100px" }}
            src={"data:image/jpeg;base64," + hospitalShow?.hospital.logoData}
            alt="logo"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hospitalShow?.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospitalShow?.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {hospitalShow?.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospitalShow?.hospital.intro}
        </Descriptions.Item>
      </Descriptions>

      {/* 预约规则信息 
      column 一行的 DescriptionItems 数量 */}
      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ margin: "30px 0" }}
      >
        <Descriptions.Item label="预约周期">
          {hospitalShow?.bookingRule.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hospitalShow?.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalShow?.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hospitalShow?.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {hospitalShow?.bookingRule.rule.map((item, index) => {
            return <div key={index}>{item}</div>;
          })}
        </Descriptions.Item>
      </Descriptions>

      <Button onClick={goBack}>返回</Button>
    </Card>
  );
}

export default HospitalShow;
